<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <link rel="stylesheet" type="text/css" href="/MeteoCal/resources/css/application.css" />
        <link rel="stylesheet" type="text/css" href="/MeteoCal/resources/css/index.css" />
        <title>MeteoCal</title>
    </h:head>
    <h:body>
        <div id="page">
            <div id="header">
                <div id="banner">
                    <div id="meteocalBox">
                        <h:outputFormat id="meteoCal" value="MeteoCal" />
                    </div>
                    <div id="logoBox">
                        <a href="./" title="MeteoCal Homepage">
                            <img src="/MeteoCal/resources/icons/meteo_calendar.png" alt="MeteoCalLogo" height="77px" />
                        </a>
                    </div>
                </div>
                <div id="login">
                    <h:form>
                        <h:panelGrid id="loginGrid" columns="2" style="float: left;" >
                            <p:outputLabel value="Username" for="usernameLogin" />
                            <p:inputText id="usernameLogin" value="#{loginBean.username}" />
                            <p:outputLabel value="Password" for="passwordLogin" />
                            <p:password id="passwordLogin" value="#{loginBean.password}" />
                            <p:growl />
                        </h:panelGrid>
                        <p:commandButton id="buttonLogin" value="Log In" action="#{loginBean.login()}"
                                         style="padding-top: 21px; padding-bottom: 21px;" update="loginGrid" />
                    </h:form>
                </div>
            </div>
            <div id="main" class="container">
                <div class="contentBox">
                    <div id="about" class="content">
                        <p:outputLabel value="What is MeteoCal?" style="font-size: 36px;" />
                        <p>
                            MeteoCal is a free online calendar to organize your events.
                        </p>
                        <p>
                            You can invite everyone in the world to join your events in a few clicks.
                        </p>
                        <p>
                            It also informs you if on the day you scheduled an event, the weather forecasts
                            signal bad weather conditions.
                        </p>
                        <p>
                            More features await you inside, register now! <br/>
                            To register, compile the form on the right and click register, then log in!
                        </p>
                    </div>
                </div>
                <div class="contentBox">
                    <div class="content">
                        <div id="regTitle" class="title">Register Now!</div>
                        <div id="regSubtitle" class="title">It's free!</div>
                        <h:form id="regForm">
                            <h:panelGrid columns="3" id="registrationGrid">
                                <p:outputLabel value="Name" for="nameReg" />
                                <p:inputText id="nameReg" value="#{registrationBean.user.name}">
                                    <p:ajax update="nameMsg" />
                                </p:inputText>
                                <p:message id="nameMsg" for="nameReg" />
                                <p:outputLabel value="Surname" for="surnameReg" />
                                <p:inputText id="surnameReg" value="#{registrationBean.user.surname}">
                                    <p:ajax update="surnameMsg" />
                                </p:inputText>
                                <p:message id="surnameMsg" for="surnameReg" />
                                <p:outputLabel value="Username" for="usernameReg" />
                                <p:inputText id="usernameReg" value="#{registrationBean.user.username}"
                                             validator="#{usernameValidatorRegistration.validate}">
                                    <p:ajax update="usernameMsg" />
                                </p:inputText>
                                <p:message id="usernameMsg" for="usernameReg" />
                                <p:outputLabel value="Password" for="passwordReg" />
                                <p:password id="passwordReg" feedback="true" match="confirmPasswordReg"
                                            value="#{registrationBean.user.password}" />
                                <p:message for="passwordReg" />
                                <p:outputLabel value="Confirm Password" for="confirmPasswordReg" />
                                <p:password id="confirmPasswordReg" />
                                <br/>
                                <p:commandButton value="Register" action="#{registrationBean.register()}"
                                                 update="registrationGrid" />
                            </h:panelGrid>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>
    </h:body>
</html>

